;
(function() {
  var templateId = hlUrlUtil.GetQueryString('templateId'); //模板id
  var block_id = hlUrlUtil.GetQueryString('block_id'); //区块id
  var type = hlUrlUtil.GetQueryString('type'); //更改类型
  new Vue({
    el: '#matter_detali',
    data: {
      quanxian: JSON.parse(window.localStorage.getItem('permissions')),
      autoPlay: [{
        key: true,
        name: '是'
      }, {
        key: false,
        name: '否',
      }],
      isAutoPlay: 'true',
      isMute: 'false',
      showMatter: type,
      block_elements: '',
      isShowBut: false, //是否显示上传视频按钮
      isShowContent: false, //是否显示上传的视频
      progress: '',
    },
    methods: {
      //获取素材类型
      getmodules() {
        hlhttp.get({
          url: 'configure/dict',
          data: {
            module_code: 'MNHU',
            config_name: 'MNHU_PAGE_MATERIAL_TYPE',
            parent_dict_code: '#',
            key: '#',
          },
          success: (data) => {
            this.modulesList = data;
          }
        })
      },
      //选择是否自动播放
      eventModule(key) {
        this.block_elements.video.autoPlayFlag = String(key)
        this.element_video(this.block_elements.video)
      },
      //是否静音
      eventMute() {
        this.block_elements.video.muteFlag = String(!this.isMute)
        this.element_video(this.block_elements.video)
      },
      //删除视频
      delVideo() {
        let obj = '#'
        hllayer.confirm('确认要删除该视频吗?', () => {
          this.element_video(obj)
        })
      },
      // 获取区块下素材信息
      getElements() {
        hlhttp.get({
          url: 'portal/block_elements',
          data: {
            template_id: templateId,
            block_id: block_id,
          },
          success: (data) => {
            if (this.showMatter == 'img') {
              data.banner.forEach(item => {
                item.isEdit = false
                item.refUrl = item.refUrl ? item.refUrl : ''
                item.EditUrl = JSON.parse(JSON.stringify(item.refUrl))
              })
              data.banner = data.banner.sort(compareAsc('seq'))

            } else {
              let obj = Object.keys(data.video)
              if (obj.length) {
                this.isShowBut = false
                this.isShowContent = true
                this.isAutoPlay = data.video.autoPlayFlag
                this.isMute = data.video.muteFlag == 'true' ? true : false
              } else {
                this.isShowBut = true
                this.isShowContent = false
              }
            }
            this.block_elements = data;
          }
        })
      },
      //编辑链接
      editUrl(item) {
        item.isEdit = true
        item.EditUrl = JSON.parse(JSON.stringify(item.refUrl))
      },
      // 排序
      rank(index, type) {
        let array = this.block_elements.banner
        let obj = this.block_elements.banner[index]
        if (type == 'up') {
          array.splice(index, 1)
          array.splice(index - 1, 0, obj)
          this.element_img(array)
        } else if (type == 'del') {
          hllayer.confirm('确认要删除该图片吗?', () => {
            array.splice(index, 1)
            this.element_img(array)
          })
        } else {
          array.splice(index, 1)
          array.splice(index + 1, 0, obj)
          this.element_img(array)
        }
      },
      // 编辑url保存
      saveEdit(item) {
        item.isEdit = false
        this.element_img(this.block_elements.banner)
      },
      //文件上传click()触发
      fileUp() {
        if (this.progress) {
          hl.toast('文件尚未上传完成')
          return
        }
        $('.fileButton').trigger('click')
      },
      fileToClick() {
        var that = this
        fileUpload('.fileButton', uploadUrl, (res) => {
          let type = ['.AVI', '.mov', '.rmvb', '.rm', '.FLV', '.mp4', '.3GP']
          if (type.indexOf(res.ext) != -1) {
            that.progress = ''
            let video = {
              id: '#',
              url: res.json.url,
              autoPlayFlag: 'true',
              muteFlag: 'false',
            }
            that.element_video(video)
          } else {
            that.progress = ''
            hl.toast('请选择正确视频格式')
          }

        }, function(val) {

          that.progress = parseInt((val.loaded / val.total) * 100) + '%'
        })
      },
      //图片上传click()触发
      picUp() {
        $('.picButton').trigger('click')
      },
      picToClick() {
        var that = this
        imgupload('.picButton', uploadUrl, (res) => {
          let imgs = [{
            id: '#',
            url: res.json.url,
            seq: '1',
            refUrl: '#',
          }]
          imgs = imgs.concat(that.block_elements.banner)
          imgs.forEach((item, index) => {
            item.seq = String(index + 1)
            delete item.isEdit
          })
          that.element_img(imgs, 'new')
        })
      },
      //编辑图片保存
      element_img(arr) {
        var newArr = [].concat(JSON.parse(JSON.stringify(arr)))
        newArr.forEach((item, index) => {
          item.seq = String(index + 1)
          delete item.isEdit
          item.refUrl = item.EditUrl ? item.EditUrl : '#'
        })
        var that = this
        hlhttp.put({
          url: 'portal/element_img',
          data: {
            template_id: templateId,
            block_id: block_id,
            imgs: JSON.stringify(newArr)
          },
          success: function() {
            that.getElements();
          }
        })
      },
      //编辑视频保存
      element_video(obj) {
        var that = this
        hlhttp.put({
          url: 'portal/element_video',
          data: {
            template_id: templateId,
            block_id: block_id,
            video: obj == '#' ? obj : JSON.stringify(obj)
          },
          success: function() {
            that.getElements();
          }
        })
      },

    },
    created() {
      hlSelectUi()
    },
    mounted() {
      this.getElements();
      this.fileToClick();
      this.picToClick();
    }
  })

  function compareAsc(propertyName) {
    return function(object1, object2) {
      var value1 = object1[propertyName];
      var value2 = object2[propertyName];
      if (value2 < value1) {
        return 1;
      } else if (value2 > value1) {
        return -1;
      } else {
        return 0;
      }
    }
  }
}())
